import React, { useState, useEffect } from 'react';
import { Modal, Form, message, Select, Row, Col, Button } from 'antd';
import { useAntdTable } from '@umijs/hooks';
import request from '@/utils/request';
import SlickTable from '@/components/SlickTable';

function BusiTypeSelect({ visiable, close, callback, busiTypeCheck, form }) {
  const { getFieldDecorator } = form;

  const [selectedRows, setSelectedRows] = useState([]);
  const [dataSource, setDataSource] = useState([]);
  const [firstList, setFirstList] = useState([]);
  const [secondList, setSecondList] = useState([]);
  // 一级业务类型
  const [firstLoading, setFirstLoading] = useState(false);
  // 二级业务类型
  const [secondLoading, setSecondLoading] = useState(false);
  // 表格loading
  const [tableLoading, setTableLoading] = useState(false);

  // 一级枚举查询
  const queryFirstList = () => {
    setFirstLoading(true);
    request('oms/serviceOrder/queryBusiType')
      .then(res => {
        if (res.success) {
          setFirstList(res.data);
        } else {
          message.error(res.errMessage);
        }
      })
      .always(() => {
        setFirstLoading(false);
      });
  };

  useEffect(() => {
    queryFirstList();
    setSelectedRows(busiTypeCheck || []);
  }, []);

  // 请求表格数据
  const getTable = ({ value }) => {
    setTableLoading(true);
    return request('oms/serviceOrder/queryDetalBusiType', {
      data: {
        ...value,
      },
    })
      .then(res => {
        if (res.success) {
          if (Array.isArray(res.data)) {
            setDataSource(res.data);
          } else {
            message.error(res.errMessage);
          }
        }
      })
      .always(() => {
        setTableLoading(false);
      });
  };

  const submit = () => {
    if (selectedRows.length) {
      callback(selectedRows);
      close();
    } else {
      message.info('你还未选中数据！');
    }
  };

  const query = () => {
    form.validateFields((err, value) => {
      if (err) return;
      getTable(value);
    });
  };

  // 一级业务类型选中进行二级级联
  const handChange = value => {
    form.resetFields(['busiSubTypeId']);
    setSecondLoading(true);
    request('oms/serviceOrder/queryBusiType', {
      data: {
        parentId: value,
      },
    })
      .then(res => {
        if (res.success) {
          setSecondList(res.data);
        } else {
          message.error(res.errMessage);
        }
      })
      .always(() => {
        setSecondLoading(false);
      });
  };

  return (
    <Modal
      title="业务类型选择"
      width="700px"
      destroyOnClose
      onCancel={close}
      onOk={submit}
      visible={visiable}
    >
      <Form className="flow fix-label">
        <Row gutter={16}>
          <Col span={10}>
            <Form.Item label="一级业务类别">
              {getFieldDecorator('busiTypeId')(
                <Select
                  allowClear
                  placeholder="请选择"
                  loading={firstLoading}
                  onChange={handChange}
                >
                  {firstList.length &&
                    firstList.map(item => {
                      return (
                        <Select.Option value={item.busiTypeId}>{item.busiTypeName}</Select.Option>
                      );
                    })}
                </Select>
              )}
            </Form.Item>
          </Col>
          <Col span={10}>
            <Form.Item label="二级业务类别">
              {getFieldDecorator('busiSubTypeId')(
                <Select allowClear placeholder="请选择" loading={secondLoading}>
                  {secondList.length &&
                    secondList.map(item => {
                      return (
                        <Select.Option value={item.busiTypeId}>{item.busiTypeName}</Select.Option>
                      );
                    })}
                </Select>
              )}
            </Form.Item>
          </Col>
          <Col span={4} className="text-right">
            <Button
              type="primary"
              onClick={() => {
                query();
              }}
            >
              查询
            </Button>
          </Col>
        </Row>
      </Form>

      <SlickTable
        rowKey="userId"
        selectedRowKeys={selectedRows.map(row => row.userId)}
        onSelectRow={selectedRows => {
          setSelectedRows(selectedRows);
        }}
        pick="radio"
        columns={[
          {
            title: '一级业务类别',
            dataIndex: 'firstType',
            ellipsis: true,
          },
          {
            title: '二级业务类别',
            dataIndex: 'secondType',
            ellipsis: true,
          },
          {
            title: '三级业务类别',
            dataIndex: 'thirdType',
            ellipsis: true,
          },
        ]}
        dataSource={dataSource}
        loading={tableLoading}
        pagination={null}
        scroll={{ y: 300 }}
      />
    </Modal>
  );
}

export default Form.create()(BusiTypeSelect);
